import React, {PureComponent} from 'react';
import ReactEcharts from 'echarts-for-react';
import echarts from 'echarts';

class RectifierModule extends PureComponent {
  getOption = (xAxisData, seriesData, color = '#00e4ff') => {
    return {
      color: ['#3398DB'],
      grid: {
        left: '-8%',
        right: '2%',
        bottom: '14%',
        containLabel: true,
      },
      xAxis: {
        type: 'category',
        data: xAxisData,
        axisTick: {
          show: false,
        },
        axisLabel: {
          interval: 0,
          color: '#fff',
          fontSize: 16,
          margin: 12,
        },
        axisLine: {
          show: false,
        },
      },
      yAxis: {
        type: 'value',
        show: false,
        splitLine: {
          show: false,
        },
      },
      series: [
        {
          name: '直接访问',
          type: 'bar',
          barWidth: '52',
          data: seriesData,
          itemStyle: {
            color,
            barBorderRadius: 4,
          },
        },
      ],
    };
  };

  render() {
    const {xAxisData = [], seriesData = [], color} = this.props;
    return (
      <ReactEcharts
        option={this.getOption(xAxisData, seriesData, color)}
        style={{height: '100%'}}
      />
    );
  }
}

export default RectifierModule;
